<template>
    <div class="page">
        <x-header :left-options="{showBack: true,backText:'课程详情'}" class="headerBox"></x-header>
        <!-- 直播 -->
        <div class="navLive">
            <img :src="courseInfo.largePicture"/>
            <div class="navLive_collect_btn" @click="onCollect">
                <img v-if="collect == false" src="../assets/images/Courseinfo04.png" class="sc"/>
                <img v-else src="../assets/images/live17.png" class="sc"/>
                <div>{{collect == false ? '收藏' : '已收藏'}}</div>
            </div>
        </div>
        <!-- 标题 -->
        <div class="navTitleBox">
            <div>{{courseInfo.title}}</div>
            <div class="navTitle_bottom">
                <div class="navTitle_bottom_star">
                    <div class="stars">
                        <div class="stars" v-if="rate<=0">
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                        </div>
                        <div class="stars" v-if="rate==1">
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                        </div>
                        <div class="stars" v-if="rate==2">
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                        </div>
                        <div class="stars" v-if="rate==3">
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                        </div>
                        <div class="stars" v-if="rate==4">
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_gray@2x.png"/>
                        </div>
                        <div class="stars" v-if="rate>=5">
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                            <img src="../assets/images/Star_yellow@2x.png"/>
                        </div>
                    </div>
                </div>
                <span>|</span>
                <div>{{courseInfo.lessonNum}}课时</div>
                <span>|</span>
                <div>{{courseInfo.studentNum}}人学过</div>
            </div>
        </div>
        <!-- 限时价格 -->
        <div class="navFootBox">
            <div class="navFoot_title">
                <div v-if="courseInfo !=''">￥{{courseInfo.price/100}}</div>
                <div v-if="courseInfo !=''">￥{{courseInfo.price/100}}</div>
            </div>
            <div v-if="courseInfo.levelName!=''">{{courseInfo.levelName}}</div>
            <div v-else>会员免费</div>
        </div>

        <!-- tab -->
        <tab
                v-model="tabIndex"
                default-color="#686868"
                active-color="#000"
                custom-bar-width="20px"
                bar-active-color="#1F7AFF"
        >
            <tab-item v-if="listContent.length>0" v-for="(val,num) in listContent" :key="num">{{val.title}}</tab-item>
        </tab>
        <swiper
                v-model="tabIndex"
                :show-dots="false"
                ref="cateSwiper"
                :min-moving-distance="100"
                @on-get-height="getPageHeight"
                class="swiperBox"
        >
            <swiper-item ref="innerSwiper" v-for="(item, index) in listContent" :key="index">
                <!-- 简介 -->
                <div v-if="item.title == '简介'" class="briefBox">
                    <!-- 课程详情 -->
                    <div class="briefInfo">
                        <div>课程详情</div>
                        <div>
                            <span decode v-if="courseInfo.about!=''">&emsp;{{courseInfo.about}}&emsp;</span>
                            <span decode v-if="courseInfo.about==''">&emsp;暂无数据&emsp;</span>
                        </div>
                    </div>
                    <!-- 授课教师 -->
                    <div class="briefTeacher">
                        <div>授课教师</div>
                        <div v-if="teachers.length>0">
                            <div class="briefTeacher_list" v-for="(item,key) in teachers">
                                <img :src="item.largeAvatar"/>
                                <div class="briefTeacher_list_con">
                                    <div>{{item.nickName}}</div>
                                    <div>
                                        简介：
                                        <span v-html="item.description"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <div class="briefTeacher_list">
                                <div class="briefTeacher_list_con">
                                    <div>暂无数据</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 授课机构 -->
                    <div class="briefOrg">
                        <div>授课机构:
                            <div class="briefOrg_logo">
                                <img src="../assets/images/logoSet.png"/>
                                <div>润禾教育</div>
                            </div>
                        </div>

                    </div>


                    <!-- 试用人群 -->
                    <div class="briefPeople" style="display: none">
                        <div>试用人群</div>
                        <div class="briefPeople_grade">
                            <div></div>
                            <div>语文作文水平想要提高的人</div>
                        </div>
                        <div class="briefPeople_grade">
                            <div></div>
                            <div>四年级</div>
                        </div>
                    </div>
                    <!-- 课程目标 -->
                    <div class="briefGoal" style="display: none">
                        <div>课程目标</div>
                        <div>语文作文水平直线提升</div>
                    </div>

                </div>
                <!-- 目录 -->
                <div v-if="item.title == '目录'" class="catalogBox">
                    <group v-for="(item,index2) in NoChapterLessons" :key="index2">
                        <cell
                                :title="item.title"
                                @click.native="videoClike(item.videoId)"
                                is-link
                                :border-intent="true"
                        ></cell>
                    </group>
                </div>

                <!-- 评价 -->
                <div v-if="item.title == '评价'" class="commentBox">
                    <img
                            v-if="comment.length<=0"
                            src="../assets/images/nullmaterial03.png"
                            alt
                            class="emptyBox"
                    />
                    <div class="evaBox">

                        <!--                        <div class="evaList" v-if="comment.length==0">暂无数据</div>-->
                        <div
                                class="evaList"
                                v-if="comment.length>0"
                                v-for="(eva, index4) in comment"
                                :key="index4"
                        >
                            <div class="evaList_left">
                                <img :src="eva.userHeader"/>
                            </div>
                            <div class="evaList_right">
                                <div class="evaList_right_top">
                                    <div>{{eva.userName}}</div>
                                    <div class="stars" v-if="eva.rating=='1'">
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                    </div>
                                    <div class="stars" v-if="eva.rating=='2'">
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                    </div>
                                    <div class="stars" v-if="eva.rating=='3'">
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                    </div>
                                    <div class="stars" v-if="eva.rating=='4'">
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_gray@2x.png"/>
                                    </div>
                                    <div class="stars" v-if="eva.rating=='5'">
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                        <img src="../assets/images/Star_yellow@2x.png"/>
                                    </div>
                                </div>
                                <div class="evaList_right_middle">{{eva.content}}</div>
                                <div class="evaList_right_link" style="display:none;">
                                    <div class="evaList_right_link_name">{{eva.otherName}}</div>
                                    <div>等人</div>
                                    <div class="evaList_right_link_num">共{{eva.num}}条回复></div>
                                </div>
                                <div class="evaList_right_bottom">
                                    <div class="evaList_right_bottom_left">{{eva.createTimeStr}}</div>
                                    <div class="evaList_right_bottom_right" style="display: none">
                                        <img src="../assets/images/share10.png"/>
                                        <img src="../assets/images/Reply12x.png"/>
                                        <img src="../assets/images/live11.png"/>
                                        <div>{{eva.zanNum}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </swiper-item>
        </swiper>
        <!-- 价格购买 -->
        <div class="briefBuy">
            <div>价格</div>
            <div v-if="courseInfo.price!=''">￥{{courseInfo.price/100}}</div>
            <div class="briefBuy_now" @click="hreftwo(courseInfo.id)">
                <router-link to="" class="routerlink">购买课程
                </router-link>
            </div>
        </div>
    </div>
</template>


<script>
    import {
        Tab,
        TabItem,
        Swiper,
        SwiperItem,
        XHeader,
        Cell,
        CellBox,
        CellFormPreview,
        Group,
        Badge,
        Confirm,
        Rater,
        XTextarea
    } from 'vux'
    import {courseDetail, getVideoInfo, creatCollect, getJsapiSign} from '@/api/index/index';
    import VueAliplayer from 'vue-aliplayer';
    import wx from 'weixin-js-sdk';
    import store from "../store/store";

    export default {
        components: {
            Tab,
            TabItem,
            Swiper,
            SwiperItem,
            XHeader,
            Group,
            Cell,
            CellFormPreview,
            CellBox,
            Badge,
            Confirm,
            Rater,
            XTextarea,
            'ali-player': VueAliplayer
        },

        mounted: function () {
            this.screenWidth = document.body.clientWidth

            console.log(this.videoUrl)
            console.log(this.vid)
            console.log(this.videoAuth)
        },
        data() {
            return {
                screenWidth: '',
                courseId: '',
                vid: '',
                videoUrl: '',
                videoAuth: '',
                courseInfo: [],
                cover: '',
                teachers: [],
                NoChapterLessons: [],
                comment: [],
                tabIndex: 0,
                collect: false,
                commentShow: false,
                commentStar: 0,
                commentText: '',
                stars: [],
                score: '4.0',
                classHour: '36',
                already: '233',
                currentPrice: '199',
                originalPrice: '299',
                rate: 0,
                // tab内容
                listContent: [
                    {
                        title: '简介'
                    },
                    {
                        title: '目录',
                        chapters: [
                            {
                                showContent: false,
                                zhang: '作文第一章',
                                jies: [
                                    {
                                        jieName: '1.如何写出更好的文章'
                                    },
                                    {
                                        jieName: '2.如何写出更好的文章'
                                    },
                                    {
                                        jieName: '3.如何写出更好的文章'
                                    },
                                    {
                                        jieName: '4.如何写出更好的文章'
                                    }
                                ]
                            },
                            {
                                showContent: false,
                                zhang: '作文第二章',
                                jies: [
                                    {
                                        jieName: '1.如何写出更好的文章'
                                    },
                                    {
                                        jieName: '2.如何写出更好的文章'
                                    },
                                    {
                                        jieName: '3.如何写出更好的文章'
                                    }
                                ]
                            },
                            {
                                showContent: false,
                                zhang: '作文第三章',
                                jies: [
                                    {
                                        jieName: '1.如何写出更好的文章'
                                    },
                                    {
                                        jieName: '2.如何写出更好的文章'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        title: '评价',
                        evas: [
                            {
                                src: require('../assets/images/playback05.png'),
                                name: '高慧雯',
                                stars: [
                                    {
                                        src: require('../assets/images/Star_yellow@2x.png')
                                    },
                                    {
                                        src: require('../assets/images/Star_yellow@2x.png')
                                    },
                                    {
                                        src: require('../assets/images/Star_yellow@2x.png')
                                    },
                                    {
                                        src: require('../assets/images/Star_yellow@2x.png')
                                    },
                                    {
                                        src: require('../assets/images/Star_gray@2x.png')
                                    }
                                ],
                                txt: '内容紧贴现代生活，新颖别致，把握时代脉搏，尽现时代气息。',
                                otherName: '纵我七情六欲半晌愁',
                                num: '233',
                                zanNum: '3157'
                            },
                        ]
                    }
                ]
            }
        },
        created() {
            let id = this.$route.query.id;
            var that = this;
            courseDetail(id, this.$store.state.user.id).then(res => {
                console.log(res.data.data);
                this.courseInfo = res.data.data.courseInfo;
                this.courseId = res.data.data.courseInfo.id;
                this.cover = res.data.data.courseInfo.largePicture;
                this.teachers = res.data.data.teachers;
                this.NoChapterLessons = res.data.data.catalogue.NoChapterLessons;
                this.comment = res.data.data.comment;
                this.collect = res.data.data.isCollected;
                this.rate = res.data.data.rate;
            }).catch(err => {
                console.log(err)
            });
            this.shareSet(id);
            // this.share(id);

        },
        methods: {
            onCollect() {
                if (this.$store.state.user.id == '') {
                    var conf = confirm("请先登录");
                    if (conf == true) {
                        this.$router.push("/");
                    }
                } else {
                    creatCollect(this.$store.state.user.id, this.courseId, this.$store.state.user.tenantId).then(res => {
                        console.log(res.data.data);
                        this.collect = res.data.data.isCollected;
                    })
                }
            },
            hreftwo(id) {
                console.log(this.$store.state.user.id);
                if (this.$store.state.user.id == '') {
                    var conf = confirm("登录后才可购买");
                    if (conf == true) {
                        this.$router.push({name: 'login', query: {courseId: this.courseId}});
                    }
                } else {
                    this.$router.push({name: 'buyCourse', query: {id: id}})
                }

            },
            getPageHeight() {
                let topHeight = document.getElementsByClassName('vux-slider')[0]
                        .offsetTop,
                    diffHeight = window.screen.height - 44;
                this.$nextTick(() => {
                    this.$refs.cateSwiper.xheight = diffHeight + 'px';
                    this.$refs.innerSwiper.xheight = diffHeight + 'px';
                })
            },

            videoClike(id) {
                this.vid = id;
                alert('请购买课程后观看视频');
            },
            getVideoInfo() {
                var that = this
                getVideoInfo(this.vid)
                    .then(res => {
                        if (
                            res.data.data.url != null &&
                            res.data.data.videoId != null &&
                            res.data.data.auth != null
                        ) {
                            var player = new Aliplayer(
                                {
                                    id: 'J_prismPlayer', // 容器id
                                    source: res.data.data.url,
                                    vid: res.data.data.videoId, //媒体转码服务的媒体Id
                                    playAuth: res.data.data.auth,
                                    width: that.screenWidth + 'px'
                                    // height: "480px"
                                },
                                function (player) {
                                    console.log(player)
                                    console.log(player.getStatus())
                                    console.log('播放器创建了')
                                }
                            )
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },

            play: function () {
                const player = this.$refs.player.instance
                player && player.play()
            },
            pause: function () {
                const player = this.$refs.player.instance
                player && player.pause()
            },
            replay: function () {
                const player = this.$refs.player.instance
                player && player.replay()
            },
            // 评价弹框取消
            commentCancel() {
                this.commentStar = 0;
                this.commentText = '';
            },
            // share(id) {
            //     //重新获取code
            //     alert("couresId" + this.$store.state.user.courseId)
            //     if (this.$store.state.user.courseId == undefined) {
            //         var courseIds = 0;
            //     } else {
            //         var courseIds = this.$store.state.user.courseId;
            //     }
            //     if (courseIds > 0) {
            //         var local = "http://www.rhyun.top/#/courseDetails-noBuy?id=" + id;
            //         if (this.$store.state.user.courseId > 0) {
            //             this.$store.commit('setUser', {courseId: 0})
            //         }
            //         var appid = "wxda53a4a8b2d85023";
            //         //不存在就打开上面的地址进行授权
            //         console.log(local);
            //         window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&N=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
            //     }
            // },
            shareSet(id) {
                courseDetail(id, this.$store.state.user.id).then(ras => {
                    console.log(ras.data.data);
                    let linkUrl = window.location.href;
                    this.courseInfo = ras.data.data.courseInfo;
                    var title = ras.data.data.courseInfo.title;
                    var largePicture = ras.data.data.courseInfo.largePicture;
                    console.log(title);
                    console.log(largePicture);
                    getJsapiSign(this.$store.state.user.tenantId, this.$store.state.user.accessToken, this.$store.state.user.ticket, linkUrl).then(res => {
                        console.log(res.data.data);
                        this.$store.commit('setUser', {accessToken: res.data.data.access_token})
                        this.$store.commit('setUser', {ticket: res.data.data.tickets})
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: res.data.data.appId, // 必填，公众号的唯一标识
                            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
                            signature: res.data.data.signature, // 必填，签名
                            jsApiList: ['onMenuShareAppMessage', 'checkJsApi'] // 必填，需要使用的JS接口列表
                        });
                        wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                            wx.checkJsApi({
                                jsApiList: ['onMenuShareAppMessage'],
                                success: function (res) {
                                    console.log("37479", res)
                                }
                            });
                            wx.onMenuShareAppMessage({
                                title: "润禾云",  // 分享标题
                                desc: title, // 分享描述
                                link: linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: largePicture, // 分享图标
                                type: 'link', // 分享类型,music、video或link，不填默认为link
                                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                                success: function () {
                                    // 用户点击了分享后执行的回调函数
                                    // alert("onMenuShareAppMessage设置成功");
                                }
                            });

                        });
                    }).catch(err => {
                        console.log(err)
                    });
                }).catch(err => {
                    console.log(err)
                });

            },
        }
    }
</script>

<style lang="less" scoped>
    .page {
        // 头部导航
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }
        }

        // 直播
        .navLive {
            width: 100%;
            // height: 428px;
            min-height: 300px;
            position: relative;
            overflow: hidden;

            /deep/ .prism-info-display {
                box-sizing: border-box;
            }

            img {
                width: 100%;
                height: 100%;
            }

            .navLive_collect_btn {
                position: absolute;
                top: 20px;
                right: 20px;
                color: #fff;
                font-size: 28px;
                display: flex;
                align-items: center;
                padding: 10px 20px;
                border-radius: 40px;
                background: rgba(0, 0, 0, 0.2);

                .sc {
                    width: 30px;
                    height: 28px;
                    margin-right: 10px;
                }
            }
        }

        /* 文章头部提示 */

        .navTitleBox {
            background-color: #fff;
            margin: 0 26px;
            padding: 20px 0;
            border-bottom: 1px solid #ededed;

            div:nth-child(1) {
                font-size: 35px;
            }

            .navTitle_bottom {
                color: #71747b;
                font-size: 28px;
                display: flex;
                align-items: center;

                span {
                    color: #ecedef;
                    margin: 0 20px;
                }

                .navTitle_bottom_star {
                    display: flex;
                    align-items: center;

                    .stars {
                        img {
                            width: 28px;
                            height: 28px;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }

        /* 限时价格 */

        .navFootBox {
            background-color: #fff;
            padding: 20px 26px;
            border-bottom: 20px solid #f8f9fa;

            div:nth-child(2) {
                font-size: 35px;
                color: #d5a13d;
                margin: 10px 0;
            }

            .navFoot_title {
                margin-top: 10px;
                display: flex;
                align-items: center;

                div:nth-child(1) {
                    font: 600 40px '微软雅黑';
                    color: #fa2a01;
                }

                div:nth-child(2) {
                    color: #969696;
                    font-size: 24px;
                    text-decoration: line-through;
                    padding-top: 8px;
                    margin: 0 20px;
                }

                div:nth-child(3) {
                    padding: 5px 20px;
                    border: 1px solid #e54c09;
                    border-radius: 10px;
                    color: #e54c09;
                    font-size: 30px;
                }
            }
        }

        /deep/ .swiperBox {
            overflow: auto;

            .vux-swiper-item {
                overflow: auto;
            }

            // 简介样式
            .briefBox {
                /* 简介页面 */

                .briefCourse {
                    padding: 20px 26px;
                    border-bottom: 20px solid #f8f9fa;

                    div {
                        font-size: 32px;
                    }

                    p {
                        font-size: 26px;
                        color: #8e8e8c;
                        margin-top: 20px;
                    }
                }

                .briefTeacher {
                    padding: 20px 26px;
                    border-bottom: 20px solid #f8f9fa;

                    div:nth-child(1) {
                        font: 600 35px '微软雅黑';
                    }

                    .briefTeacher_list {
                        margin: 20px 0;
                        display: flex;
                        align-items: center;

                        img {
                            width: 126px;
                            height: 126px;
                            margin-right: 20px;
                            flex-shrink: 0;
                        }

                        .briefTeacher_list_con {
                            div:nth-child(1) {
                                font: 600 32px '微软雅黑';
                            }

                            div:nth-child(2) {
                                margin-top: 10px;
                                font-size: 24px;
                            }

                            div:nth-child(2) text {
                                color: #8e8e8c;
                            }
                        }
                    }
                }

                // 授课机构
                .briefOrg {
                    padding: 20px 26px;
                    border-bottom: 20px solid #f8f9fa;

                    div:nth-child(1) {
                        font: 600 35px '微软雅黑';
                    }

                    .briefOrg_logo {
                        margin-top: 20px;
                        display: flex;
                        align-items: center;

                        img {
                            width: 150px;
                            height: 30px;
                            /*margin-right: 30px;*/
                        }

                        div {
                            color: #979795;
                            font-size: 28px;
                        }
                    }
                }

                // 课程详情
                .briefInfo {
                    padding: 20px 26px;
                    border-bottom: 20px solid #f8f9fa;

                    div:nth-child(1) {
                        font: 600 35px '微软雅黑';
                    }

                    div:nth-child(2) {
                        font-size: 24px;
                        color: #8e8e8c;
                        margin-top: 20px;
                        line-height: 35px;
                    }
                }

                // 适用人群
                .briefPeople {
                    padding: 20px 26px;
                    border-bottom: 20px solid #f8f9fa;

                    div:nth-child(1) {
                        font: 600 35px '微软雅黑';
                    }

                    .briefPeople_grade {
                        margin: 10px 0;
                        display: flex;
                        align-items: center;

                        div:nth-child(1) {
                            width: 10px;
                            height: 10px;
                            background-color: #6d6d6d;
                            border-radius: 50%;
                            margin: 0 20px;
                        }

                        div:nth-child(2) {
                            color: #8e8e8c;
                            font-size: 32px;
                        }
                    }
                }

                .briefGoal {
                    padding: 20px 26px;
                    border-bottom: 20px solid #f8f9fa;

                    div:nth-child(1) {
                        font: 600 35px '微软雅黑';
                    }

                    div:nth-child(2) {
                        color: #8e8e8c;
                        font-size: 32px;
                        margin: 20px 0;
                    }
                }


            }

            // 目录样式
            .catalogBox {
                /deep/ .weui-cells {
                    margin-top: 0;

                    /deep/ .weui-cell {
                        font-size: 32px;
                    }

                    .slide {
                        padding: 0 40px;
                        overflow: hidden;
                        max-height: 0;
                        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
                        background-color: #f8f9fa;

                        .jie {
                            color: currentColor;
                            color: #616161;
                            font-size: 30px;
                            padding: 20px 0;
                            display: block;
                            border-top: 1px solid #f0efee;

                            .jieIcon {
                                width: 42px;
                                height: 42px;
                                margin-right: 20px;
                                vertical-align: middle;
                            }
                        }
                    }

                    .animate {
                        max-height: 9999px;
                        transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
                        transition-delay: 0s;
                    }
                }

                /deep/ .weui-cells:before {
                    border-top: 0;
                }
            }

            // 评价样式
            .commentBox {
                .evaBox {
                    padding: 20px 26px;
                    padding-bottom: 100px;

                    .evaList {
                        display: flex;

                        .evaList_left {
                            margin-right: 20px;

                            img {
                                width: 80px;
                                height: 80px;
                                margin-top: 20px;
                            }
                        }

                        .evaList_right {
                            width: 100%;
                            font-size: 35px;
                            border-bottom: 1px solid #eeeeee;

                            .evaList_right_top {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                div {
                                    color: #575757;
                                }

                                .stars {
                                    img {
                                        width: 28px;
                                        height: 28px;
                                        margin-right: 10px;
                                    }
                                }
                            }

                            .evaList_right_middle {
                                margin: 10px 0;
                            }

                            .evaList_right_link {
                                margin: 10px 0;
                                background-color: #f7f7f7;
                                display: flex;
                                align-items: center;
                                padding: 10px 20px;
                                font-size: 30px;

                                .evaList_right_link_name {
                                    max-width: 260px;
                                    color: #5f7293;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                .evaList_right_link_num {
                                    color: #5f7293;
                                    margin-left: 20px;
                                }
                            }

                            .evaList_right_bottom {
                                margin: 20px 0;
                                color: #a7a7a7;
                                font-size: 24px;
                                display: flex;
                                justify-content: center;
                                /* align-items: center; */

                                .evaList_right_bottom_right {
                                    margin-left: auto;
                                    display: flex;
                                    align-items: center;

                                    img {
                                        width: 30px;
                                        height: 28px;
                                        margin: 0px 20px;
                                    }

                                    div {
                                        display: inline-block;
                                        font-size: 32px;
                                    }
                                }
                            }
                        }
                    }

                    .commentBtn {
                        position: absolute;
                        bottom: 20px;
                        left: 20px;
                        right: 20px;
                        height: 80px;
                        line-height: 80px;
                        text-align: center;
                        background-image: linear-gradient(-90deg, #ff8f00, #f50 97%);
                        color: #fff;
                        border: 2px solid #eee;
                        border-radius: 20px;
                        font-size: 30px;
                    }
                }
            }
        }

        // 购买课程
        .briefBuy {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px 38px;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            z-index: 9;

            div:nth-child(1) {
                color: #797979;
                font-size: 32px;
            }

            div:nth-child(2) {
                margin-left: 20px;
                color: #fa2a01;
                font: 600 45px '微软雅黑';
            }

            .briefBuy_now {
                background-color: #fa2a01;
                color: #fff;
                font: 600 40px '微软雅黑';
                /* padding: 20px 110px; */
                width: 375px;
                height: 84px;
                text-align: center;
                line-height: 84px;
                margin-left: auto;

                .routerlink {
                    color: currentColor;
                }
            }
        }

        // 评价弹框
        /deep/ .commentDialog {
            .innerBox {
                text-align: left;

                .starBox {
                    .label {
                        font-size: 30px;
                        margin-right: 20px;
                        padding-top: 5px;
                    }
                }
            }
        }
    }
</style>